<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>部门管理</span>
    </div>
    <v-tableBtns
      :show-export="false"
      :show-create="true"
      @addNew="addNew"
    />

    <v-table
      :table-title="tableTitle"
      :table-data="tableData"
      :deletable="false"
      @edit="edit"
    />

    <el-dialog
      :visible.sync="dialogVisible"
      title="添加/修改部门"
      width="30%"
      center>
      <v-form
        :form-title="accountTitle"
        :form-data="accountData"
        label-width="120px"
      />

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
  import { mapGetters } from 'vuex'
  import searchForm from '@/views/components/searchForm'

  export default {
    name: 'Home',
    components: { searchForm },
    data() {
      return {
        isEdit: true,

        // f分页
        pageInfo: {
          pageNumber: 1,
          pageSize: 30,
          totalPage: 0,
          totalRow: 0
        },
        dialogVisible: false,
        tableTitle: [
          {
            cn: 'id',
            en: 'id'
          },
          {
            cn: '部门名称',
            en: 'bm_name'
          },
          {
            cn: '创建时间',
            en: 'created_at'
          },
          {
            cn: '更新时间',
            en: 'updated_at'
          }
        ],
        tableData: [],

        exportTitle:[],
        exportData:[],

        originTableData: [],

        addTitle: [
          {
            cn: '部门名称',
            en: 'bm_name'
          },
        ],
        editTitle: [
          {
            cn: 'id',
            en: 'id',
            disabled: true
          },
          {
            cn: '部门名称',
            en: 'bm_name'
          },
        ],
        accountData: {}
      }
    },
    activated() {
      this.getTableList()
    },
    methods: {
      getTableList() {
        this.$get('action/StaffinfoCtrl/staff_group')
          .then(res => {
            let list
            if (res.data.list && res.data.list.length) {
              list = res.data.list.map((item, index) => {
                return item
              })
            }
            this.tableData = list || []
          })
      },

      addNew() {
        this.dialogVisible = true
        this.isEdit = false
      },
      edit(val) {
        this.dialogVisible = true
        this.isEdit = true
        this.accountData = this.$deepClone(val.row)
      },
      del(val) {
        const data = { id: val.row.id }
        this.$post('action/ReceivBank/del', data)
          .then(res => {
            this.getTableList()
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
      },
      submit() {
        this.dialogVisible = false
        const data = this.accountData
        this.$post('action/StaffinfoCtrl/staff_group_save', data)
          .then(res => {
            this.getTableList()
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
      }

    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ]),
      accountTitle() {
        if (this.isEdit) {
          return this.editTitle
        } else {
          return this.addTitle
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .top-nav {
    padding: 0 55px 15px 0;
  }

  .line {
    text-align: center;
  }

  .grid-content {
    /*font-size: 20px;*/
    cursor: pointer;
    color: #45d1e1;

    .color {
      /*font-size: 20px;*/
      color: #45d1e1;
      font-weight: 600;
    }
  }

  .table-menu {
    /*padding-left: 30px;*/
    padding-bottom: 15px;
  }

  .block {
    padding-top: 15px;
  }
</style>

